<template>
  <div class="da">
    <div>欢迎光临_vue开发的收银系统_水果店</div>
    <div>苹果10￥/斤，折扣 8 折</div>
    <div>请输入你要购买的斤数<input type="number" v-model="num"></div>
    <div><button @click="butFn">结账买单</button></div>
    <div>
      结账单：总价：{{ totalPrice }} ￥元 折后价：{{ after }} ￥元 省了：{{
        difference
      }}
      ￥元
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      totalPrice: "",
      after: "",
      difference: "",
    };
  },
  methods: {
    butFn() {
      this.totalPrice = this.num * 10;
      this.after = this.num * 8;
      this.difference = this.totalPrice - this.after;
    },
  },
};
</script>

<style>
.da div {
  width: 700px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #eee;
}
</style>